import { getRun, listEvents } from "@autoscholar/core";
import { redact } from "@autoscholar/observability";
import { STAGES } from "@autoscholar/schemas";
import Link from "next/link";
import { notFound } from "next/navigation";
import { StatusBadge } from "@/components/StatusBadge";
import { disciplineLabel, fmtBytes, fmtDateTime, fmtUsd, modeLabel, shortHash } from "@/lib/format";
import { db } from "@/lib/server/db";
import { LiveTimeline } from "./LiveTimeline";
import { RunActions } from "./RunActions";

export const dynamic = "force-dynamic";

export default async function RunDetail({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const d = db();
  let data: Awaited<ReturnType<typeof getRun>>;
  try {
    data = await getRun(d, id);
  } catch {
    notFound();
  }
  const { run, attempts, stages, artifacts, lease, gates } = data;
  const initialEvents = (await listEvents(d, id, 0, 500)).map((e) =>
    redact({
      seq: e.seq,
      at: e.at.toISOString(),
      level: e.level,
      kind: e.kind,
      stage: e.stage,
      message: e.message,
      data: e.data,
    }),
  );
  const latestAttempt = attempts.at(-1);
  const stageMap = new Map(stages.filter((s) => s.attemptId === latestAttempt?.id).map((s) => [s.stage, s]));
  const latestArtifacts = new Map<string, (typeof artifacts)[number]>();
  for (const a of artifacts) if (!latestArtifacts.has(a.path)) latestArtifacts.set(a.path, a);
  const manifest = run.manifest as Record<string, unknown>;
  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <p className="eyebrow">
            <Link href="/admin/runs">Runs</Link>
          </p>
          <h1 className="title-2 mt-1">{run.title}</h1>
          <p className="muted mt-1 flex flex-wrap items-center gap-2 text-sm">
            <StatusBadge status={run.status} />
            <span>
              {disciplineLabel(run.discipline)} · {modeLabel(run.researchMode)}
              {run.secondaryModes.length ? ` (+${run.secondaryModes.map(modeLabel).join(", ")})` : ""}
            </span>
            <span className="font-mono text-xs">{run.id}</span>
          </p>
        </div>
        <RunActions runId={run.id} status={run.status} paperId={run.paperId} />
      </header>

      <section className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
        {[
          ["Attempt", `${run.currentAttemptNo}/${run.maxAttempts}`],
          ["Stage", run.currentStage ?? "—"],
          ["Cost", `${fmtUsd(run.totalCostUsd)} / ${fmtUsd(run.maxBudgetUsd)}`],
          ["Runtime cap", `${run.maxRuntimeMinutes} min`],
          ["Worker", lease ? `lease #${lease.fencingToken}` : latestAttempt?.workerId ? "released" : "—"],
          ["Auto-publish", run.autoPublish ? "yes" : "no"],
        ].map(([l, v]) => (
          <div key={l} className="surface p-3">
            <p className="label">{l}</p>
            <p className="mt-1 font-mono text-sm">{v}</p>
          </div>
        ))}
      </section>

      <section aria-labelledby="stages">
        <h2 id="stages" className="title-3">
          Stage progress
        </h2>
        <ol className="mt-2 grid gap-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
          {STAGES.map((s) => {
            const ex = stageMap.get(s.key);
            const st =
              ex?.status ??
              (s.key === "quality" && gates.length
                ? "completed"
                : s.key === "publication" && run.status === "published"
                  ? "completed"
                  : "pending");
            return (
              <li key={s.key} className="surface flex items-center justify-between gap-2 px-3 py-2 text-xs">
                <span>
                  <span className="subtle font-mono">{s.index}</span> {s.name}
                </span>
                <StatusBadge status={st} />
              </li>
            );
          })}
        </ol>
      </section>

      <div className="grid gap-6 lg:grid-cols-12">
        <section className="lg:col-span-7" aria-labelledby="timeline">
          <h2 id="timeline" className="title-3">
            Timeline
          </h2>
          <LiveTimeline
            runId={run.id}
            initial={initialEvents}
            active={!["published", "failed", "cancelled"].includes(run.status)}
          />
        </section>
        <div className="space-y-6 lg:col-span-5">
          <section className="surface p-4">
            <h2 className="title-3">Artifacts ({latestArtifacts.size})</h2>
            {latestArtifacts.size === 0 ? (
              <p className="muted mt-2 text-sm">No artifacts uploaded yet.</p>
            ) : (
              <ul className="mt-2 max-h-96 space-y-1 overflow-auto text-xs">
                {[...latestArtifacts.values()].map((a) => (
                  <li key={a.id} className="flex items-center justify-between gap-2 border-b py-1 hairline">
                    <a href={`/api/admin/runs/${run.id}/artifacts/${a.path}`} className="font-mono break-all">
                      {a.path}
                    </a>
                    <span className="subtle whitespace-nowrap">
                      v{a.version} · {fmtBytes(a.bytes)} · {shortHash(a.sha256, 8)}
                      {a.synthetic ? " · synthetic" : ""}
                    </span>
                  </li>
                ))}
              </ul>
            )}
          </section>
          <section className="surface p-4">
            <h2 className="title-3">Attempts</h2>
            <ul className="mt-2 space-y-1 text-xs">
              {attempts.map((a) => (
                <li key={a.id} className="flex justify-between gap-2">
                  <span>
                    #{a.attemptNo} <StatusBadge status={a.status} />{" "}
                    {a.resumeFromStage ? `resumed after ${a.resumeFromStage}` : ""}
                  </span>
                  <span className="subtle">
                    {fmtDateTime(a.startedAt)} → {a.endedAt ? fmtDateTime(a.endedAt) : "…"} ·{" "}
                    {fmtUsd(a.costUsd)}
                  </span>
                  {a.error && (
                    <span className="block" style={{ color: "var(--color-danger-500)" }}>
                      {a.error}
                    </span>
                  )}
                </li>
              ))}
            </ul>
          </section>
          <section className="surface p-4">
            <h2 className="title-3">Immutable manifest</h2>
            <dl className="mt-2 grid grid-cols-[max-content_1fr] gap-x-3 gap-y-0.5 text-xs">
              {Object.entries(manifest).map(([k, v]) => (
                <div key={k} className="contents">
                  <dt className="muted">{k}</dt>
                  <dd className="font-mono break-all">{typeof v === "string" ? v : JSON.stringify(v)}</dd>
                </div>
              ))}
              <dt className="muted">manifestSha256</dt>
              <dd className="font-mono break-all">{run.manifestSha256}</dd>
            </dl>
          </section>
          {gates.length > 0 && (
            <section className="surface p-4">
              <h2 className="title-3">Latest quality evaluation</h2>
              <p className="muted text-xs">
                {gates.filter((g) => g.status === "pass").length} pass ·{" "}
                {gates.filter((g) => g.status === "fail").length} fail ·{" "}
                {gates.filter((g) => g.status === "warn").length} warn
              </p>
              <Link href={`/admin/quality/${run.id}`} className="btn btn-sm mt-2">
                Open quality report
              </Link>
            </section>
          )}
        </div>
      </div>
    </div>
  );
}